<template>
    <div class= "gallary-container" @click= "handleGallary">
        <div class= "gallary-wrapper">
            <swiper :options="swiperOptions" class= "gallary-wrapper">
                <swiper-slide v-for= "(item, index) in gallaryImgs" :key= "index">
                    <img class= "gallary-swiper-img" :src= "item">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'commom-gallary',
    data() {
        return {
            gallaryImgs: [],
            swiperOptions: {
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                observer: true,
                observeParents: true
            }
        }
    },
    methods: {
        getGallaryInfo() {
            axios.get('/api/detail.json')
                .then(this.getGallaryInfoSucc)
        },
        getGallaryInfoSucc(res) {
            res = res.data
            if (res.ret && res.data) {
                this.gallaryImgs = res.data.gallaryImgs
            }
        },
        handleGallary() {
            this.$emit('closeGallary')
        }
    },
    mounted() {
        this.getGallaryInfo()
    }
}
</script>

<style lang="stylus" scoped>
// swiper-container自带overflow hidden
.gallary-wrapper >>> .swiper-container
    overflow visible
*
    box-sizing border-box
    margin 0
    padding 0
    .gallary-container
        z-index 20
        display: flex
        flex-direction: column
        justify-content: center
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 0
        background: #000
        .gallary-wrapper
            width 100%
            height 0
            padding-bottom 100%
            .gallary-swiper-img
                width 100%
            .swiper-pagination
                color: #fff
                // 自带position absolute
                bottom -1rem
</style>
